$(function(){

  var pageSize = 3;
  var currentPage =1;

  var picArr = [];
//1.渲染
  function render(){
    $.ajax({
      url:'/product/queryProductDetailList',
      type:'get',
      dataType:'json',
      data:{
        page:currentPage,
        pageSize:pageSize,
      },
      success:function(info){
        console.log(info);
        $('tbody').html(template('tmp',info))
         setPage(info.total)
      },
      
    })
  }
  render()

//2.分页
  function setPage(total){
    $("#pagintor").bootstrapPaginator({
      bootstrapMajorVersion:3,//默认是2，如果是bootstrap3版本，这个参数必填
      currentPage:currentPage,//当前页
      totalPages:Math.ceil(total/pageSize),//总页数
      onPageClicked:function(event, originalEvent, type,page){
        //为按钮绑定点击事件 page:当前点击的按钮值
        currentPage = page;
        render();
      }

    });
  }


 //3.渲染添加商品
  function rander(){
    $.ajax({
      url:'/category/queryTopCategoryPaging',
      type:'get',
      dataType:'json',
      data:{
        page:1,
        pageSize:10000,
      },
      success:function(info){
        $('.dropdown-menu').html(template('tmp2',info))
      }
    })
  }
  rander()

    // 4- 点击下拉列表 设置选中项 
    // 把下拉列表中点击a标签文字，设置给上面按钮
    $('.dropdown-menu').on('click','a',function(){
      console.log($(this).text())
      //将选择的文字代替
      $('.caret-list').text($(this).text())
      //将id保存在隐藏域中
      $('#brandId').val($(this).data('id'));
      
      $('#form').data('bootstrapValidator').updateStatus('brandId', 'VALID')
    })

    //5.上传图片
    $("#file").fileupload({
      dataType:"json",
      //e：事件对象
      //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
      done:function (e, data) {
        console.log(data);

        //只保存最近上传的三张图片
        var r = data.result;  //获取返回的图片的信息

        //1.把图片添加到数组中
        picArr.unshift(r);
        //2.让图片显示
        $('.img-box').prepend('<img src=" '+ r.picAddr+'" height="80">')

        
        if(picArr.length ==3){
          $('#form').data('bootstrapValidator').updateStatus('imgStatus', 'VALID')
        }else if(picArr.length > 3){
            picArr.pop();
            $('.img-box img:last-child').remove(); //删除自己
          }

        console.log(picArr)
        
        
      }
    
      
});

  //6.验证
  //使用表单校验插件
$('#form').bootstrapValidator({
  //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
  excluded: [],

  //2. 指定校验时的图标显示，默认是bootstrap风格
  feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },

  //3. 指定校验字段
  fields: {
    //校验用户名，对应name表单的name属性
    brandId: {
      validators: {
        //不能为空
        notEmpty: {
          message: '请选择二级分类'
        },
      }
    },
    proName: {
      validators: {
        //不能为空
        notEmpty: {
          message: '请输入商品名称'
        },
      }
    },
    proDesc: {
      validators: {
        //不能为空
        notEmpty: {
          message: '请输入商品描述'
        },
      }
    },
    num: {
      validators: {
        //不能为空
        notEmpty: {
          message: '请输入商品库存'
        },
      }
    },
    size: {
      validators: {
        //不能为空
        notEmpty: {
          message: '请输入商品尺码'
        },
      }
    },
    oldPrice: {
      validators: {
        //不能为空
        notEmpty: {
          message: '请输入商品原价'
        },
      }
    },
    price: {
      validators: {
        //不能为空
        notEmpty: {
          message: '请选输入商品价格'
        },
      }
    },
    imgStatus: {
      validators: {
        //不能为空
        notEmpty: {
          message: '请上传三张图片'
        },
      }
    },
  }

});

//7.
  $('#form').on('success.form.bv',function(e){
    e.preventDefault()
    $.ajax({
      url:'/product/addProduct',
      type:'post',
      data:$('#form').serialize(),
      dataType:'json',
      success:function(info){
        console.log(info)
        currentPage = 1;
        render();
        $('.modal-add').modal('hide');
        // 表单重置
        $('#form').data('bootstrapValidator').resetForm(true);
        $('.caret-list').text('请选择二级分类');
        $('.img-box').empty()
      }
    })
  })

})